import React, { useState } from 'react';
import Timeline from './Timeline';
import DetailPanel from './DetailPanel';
import { TimelineEvent, TimelineCardProps } from './schemas';
import styles from './Timeline.module.css';

// const timelineData: TimelineEvent[] = [
//   // 在这里添加您的时间轴事件数据
// ];

const CompoTimeline = ({ timelineData, maxHeight }: TimelineCardProps) => {
    const [activeEvent, setActiveEvent] = useState<TimelineEvent>(timelineData[0]);
  
    return (
      <div 
        className={styles.container} 
        style={{ maxHeight: maxHeight ?? '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
      >
        <main className={styles.main} style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
          <Timeline 
            events={timelineData} 
            onActiveEventChange={setActiveEvent}
          />
          <DetailPanel event={activeEvent} />
        </main>
      </div>
    );
  };

export default CompoTimeline;